<?php
/**
 * 代码 编辑器
 * User: apple
 * Date: 1/23/22
 * Time: 9:54 PM
 */

use \app\assets\BackendAsset as Asset;

/* @var $this yii\web\View */
/* @var $_params_ array 总参数变量 */
/* @var $height array 编辑器高度 */
/* @var $code string 初始内容 */
/* @var $prefix string 前缀，主要用作ID，等 */
/* @var $suffix string 后缀，主要用作ref等 */

// 前缀
$prefix = empty($prefix) ? 'code_html_editor' : $prefix;
// 后缀
$suffix = empty($suffix) ? '""' : $suffix;

// 编辑器 高度
$height = empty($height) || !is_numeric($height) ? 500 : $height;
$height = is_numeric($height) ? $height . 'px' : $height;

// 编辑器 默认内容
$code = empty($code) ? 'null' : $code;

// HTML
$template = <<<EOL

    <div>
        <div :id="scope" style="height: {$height};"></div>
    </div>

EOL;

$js = <<<EOL
Vue.component('code-editor', {
    template: `$template`,
    props: {
        height: { // 高度
            type: String,
            default: '500px'
        },
        code: { // 编辑器内容
            type: String,
            default: ''
        }
    },
    data: function () {
        return {
            scope: '{$prefix}_' + \$w.getRandStr(),
            codeEditor: null, // 代码编辑器
        };
    },
    created: function () {
    
        var that = this;
        this.\$nextTick(function () {
            // 初始化
            that.initCodeEditor(that.code);
        });
    },
    methods: {
        /**
         * 展示赋值[HTML]窗口
         */
        initCodeEditor: function (\$code) {
        
            // 默认值
            \$code = \$code || '';
            
            // 初始化代码编辑器
            var that = this;
            this.\$nextTick(function () {
            
                ace.config.set("basePath", "/plugin/ace-editor/1.4.9");
                ace.require("ace/ext/language_tools");
                that.codeEditor = ace.edit(this.scope);
                that.codeEditor.setOptions({
                    enableBasicAutocompletion: true,
                    enableSnippets: true,
                    enableLiveAutocompletion: true,
                    fontSize: '12pt'
                });
                that.codeEditor.setTheme("ace/theme/monokai");
                that.codeEditor.getSession().setMode("ace/mode/php");
                
                // 设置内容
                that.codeEditorAppendContent(\$code);
            });
        },
        /**
         * 销毁实例
         */
        destroyCodeEditor: function () {
            
            if (!this.codeEditor) return true;
            // 销毁实例
            this.codeEditor.destroy();
            $(this.codeEditor.container).html('');
            
            // 删除实例对象值
            this.\$set(this, 'codeEditor', null);
        },
        /**
         * 获取代码编辑器值
         */
        getCodeEditorValue: function () {
            
            return this.codeEditor.getValue();
        },
        /**
         * 代码编辑器内容 赋值
         */
        codeEditorSetContent: function (\$content) {
            
            if (!this.codeEditor) {
                this.code = \$content;
            } else {
                this.codeEditor.setValue(html_beautify(\$content));
            }
        },
        /**
         * 代码编辑器内容 追加(最后)
         */
        codeEditorAppendContent: function (\$content) {
            
            var stageContent = this.getCodeEditorValue();
            stageContent = (!stageContent ? '' : stageContent) + \$content;
            
            this.codeEditor.setValue(html_beautify(stageContent));
        },
    }
});
EOL;

if (empty($this->params['reg_code_editor'])) Asset::addScript($this, '/plugin/ace-editor/1.4.9/ace.min.js');
if (empty($this->params['reg_code_editor'])) Asset::addScript($this, '/plugin/ace-editor/1.4.9/ext-language_tools.min.js');
if (empty($this->params['reg_code_editor'])) Asset::addScript($this, '/js/beautify-html.js');
if (empty($this->params['reg_code_editor'])) $this->registerJs($js);
// 已注册过
$this->params['reg_code_editor'] = true;

echo "<code-editor height='$height' :code='$code' :ref='\"$prefix\" + $suffix'></code-editor>";
?>
